<template>

  <div class="total-area-list">
    <div v-for="(item,index) in areaList " :key="index" class="contianer">
      <div @click="toggleTotalCity(item.text, item.area_id)"  class="container-desc">
        <em v-if="hasChild" class="icon plus-and-minus-icon">{{open ? '-' : '+'}}</em>
        <em v-if="!hasChild" class="icon file-text"></em>
        {{ item.text }}
        <div style="float: right;display: none;">{{item.area_id}}</div>
      </div>
      <div v-show="open" v-if="hasChild"   :id="index"  ref="tabItem">
        <single-tree :areaList="item.nodes" :text="item.text" :areaId="item.area_id" style="padding-left: 0.3rem;"></single-tree>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SingleTree',
    props: {
      areaList: Array
    },
    data () {
      return {
        open: true
      }
    },
    mounted () {

    },
    computed: {
      hasChild() {
        return this.areaList[0].nodes && this.areaList[0].nodes.length
      }
    },
    methods: {
      toggleTotalCity(city, id) {
        this.$store.commit('changeCity', city)
        this.$store.commit('changeId', id)
        if(this.hasChild) {
          this.open = !this.open
        }
      },
      handleCityClick(city, id){

      }
    }
  }
</script>

<style lang="stylus" scoped>
  .total-area-list{
    width: 100%;
  }
  .contianer{
    font-size: 0.3rem;
    padding-top: 0.1rem;
    width: 100%;
  }
  .contianer-desc{
    margin-top: 0.2rem;
    border-bottom: 1px solid #ccc;
    width: 80%;
  }

  li > em {
    cursor: pointer;
    font-size: 16px;
    line-height: 15px;
  }
  li > div:visited{
    background: #fff;
  }

  em.icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-left: 10px;
    padding-top: 3px;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
  .tree-menu li {
    line-height: 1.5;
  }

</style>
